<template>
  <div>
    <card
      :width="1400"
      class="box"
      style="margin: 24px auto 0 auto"
      v-loading="loading"
    >
      <div class="boxmore">
        <div :class="'content'">
          <router-link to="/teaDisciplineGroup/disciplineGroup">
            <div class="item">
              <img src="@/assets/images/more/icon1.png"/>
              <div class="line"></div>
              <div class="title">学科专业组</div>
            </div>
          </router-link>
          <!-- 只有专业组组长显示课程审核 -->
          <router-link
            to="/teaDisciplineGroup/waitReviewCourseList"
            v-if="disciplineInfo.isLeader == 1"
          >
            <div
              :class="[
                'item',
                disciplineInfo.waitReviewCourseNum > 0 ? 'itemNoRed' : '',
              ]"
            >
              <img src="@/assets/images/more/icon2.png"/>
              <div class="line"></div>
              <div class="red" v-if="disciplineInfo.waitReviewCourseNum > 0">
                {{
                  disciplineInfo.waitReviewCourseNum < 100
                    ? disciplineInfo.waitReviewCourseNum
                    : 99
                }}
              </div>
              <div class="title">课程审核</div>
            </div>
          </router-link>
          <router-link to="/homePage" v-if="isopenResourcce">
            <div class="item">
              <img src="@/assets/images/more/icon3.png"/>
              <div class="line"></div>
              <div class="title">资源库</div>
            </div>
          </router-link>
          <router-link to="/workstation">
            <div class="item">
              <img src="@/assets/images/more/icon4.png"/>
              <div class="line"></div>
              <div class="title">工作站</div>
            </div>
          </router-link>

          <router-link to="/dataAtAGlance">
            <div class="item">
              <img src="@/assets/images/more/icon5.png"/>
              <div class="line"></div>
              <div class="title">数据概览</div>
            </div>
          </router-link>
          <router-link to="/user/helpCenter">
            <div class="item">
              <img src="@/assets/images/more/icon6.png"/>
              <div class="line"></div>
              <div class="title">帮助中心</div>
            </div>
          </router-link>
        </div>
      </div>
    </card>
  </div>
</template>

<script>
import { branchDisciplineIsLeader } from '@/api/disciplineGroup/disciplineGroup'
import { isEnableNetdisk } from '@/api/library_index'

export default {
  name: 'moreControl',
  data() {
    return {
      isopenResourcce: false,
      loading: false,
      disciplineInfo: {}
    }
  },
  mounted() {
    this.getisOpenResource()
    this.getIsLeader()
  },
  methods: {
    // 获取 学科专业组-是否组长和待审批数量
    async getIsLeader() {
      try {
        this.loading = true
        let res = await branchDisciplineIsLeader()
        if (res.code == 200) {
          this.disciplineInfo = res.data
          console.log('disciplineInfo', this.disciplineInfo)
        }
      } finally {
        this.loading = false
      }
    },
    // 获取当前用户是否开启资源库
    async getisOpenResource() {
      let res = await isEnableNetdisk()
      this.isopenResourcce = res.data === 1;
    }
  }
}
</script>


<style scoped lang="scss">
.boxmore {
  box-sizing: border-box;
  padding-bottom: 50px;
  height: 100%;
  overflow-y: auto;
}

// 滚动条消失
.boxmore::-webkit-scrollbar-thumb {
  background: transparent !important;
  border-radius: 0 !important;
}

.content {
  display: flex;
  padding: 95px 223px 0 223px;
  flex-wrap: wrap;

  .item:hover {
    border: none !important;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1) !important;
  }

  .itemNoRed {
    border: none !important;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1) !important;
  }

  .item {
    margin: 0 27px 48px 27px;
    position: relative;

    .red {
      position: absolute;
      top: 190px;
      left: 183px;
      width: 14px;
      height: 14px;
      background: #ff3b30;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 500;
      font-size: 10px;
      color: #ffffff;
      line-height: 14px;
      text-align: center;
      font-style: normal;
      border-radius: 50%;
    }

    width: 262px;
    height: 262px;
    background: #ffffff;
    border: 1px solid #ebebeb;
    border-radius: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
      width: 63px;
      height: 63px;
      margin: 63px 0 0 0;
    }

    .line {
      width: 40px;
      height: 4px;
      background: rgba(204, 204, 204, 1);
      margin-top: 51px;
    }

    .title {
      margin-top: 10px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 500;
      font-size: 24px;
      color: #333333;
      line-height: 33px;
      text-align: center;
      font-style: normal;
    }
  }
}
</style>
